<template>
  <div class="mapstate">
    <h1>{{ msg }}</h1>
    <h2>Essential mapstate</h2>
    <p>{{count}}</p>
    <p>{{countAlias}}</p>
    <p>{{countPlusLocalState}}</p>
    <img src="/static/img/1.jpg" alt="">
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'mapstate',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      count2: 1234,
      localCount: 2
    }
  },
  computed: mapState({
    count: state => state.count,
    countAlias: 'count',
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
</script>
